<template>
    <div id="loop-pie" ref="canvas" class="canvas" :style="{width: '100%', height: canHeight + 'px'}"></div>
</template>
<script setup lang="ts">
import { defineProps, computed, onMounted } from 'vue'
import * as echarts from 'echarts/core';
import {
  TooltipComponent,
  type TooltipComponentOption,
  LegendComponent,
  type LegendComponentOption,
  GraphicComponent,
  type GraphicComponentOption,
  GridComponent,
  type GridComponentOption,
} from 'echarts/components';
import { PieChart, type PieSeriesOption } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout,
  GraphicComponent,
  GridComponent
]);

type EChartsOption = echarts.ComposeOption<
  TooltipComponentOption | LegendComponentOption | PieSeriesOption | GraphicComponentOption | GridComponentOption
>;
const props = defineProps({
    canvasHeight: {
        type:Number,
        default: 300
    },
    data: {
        type: Object,
        default: () => { } 
    }
})
let canHeight = computed(() => { return props.canvasHeight})
onMounted(() => {
    var chartDom = document.getElementById('loop-pie');
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    option = {
        tooltip: {
            trigger: 'item',
            backgroundColor: '#2758c3',
            borderColor: '#2758c3', 
            textStyle: {
                color: '#ffffff',
                fontSize: 12
            }
        },
        legend: {
            show: true,
            top: 0,
            left: '2%',
            orient: 'vertical',
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {color: '#fff'},
        },
        grid: {
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            containLabel: true
        },
        graphic: {
            type: 'text',
            left: 'center',
            top: 'center',
            style: {
                text: "设备",
                fill: '#ffffff',
                fontSize: 24,
            }
        },
        series: [
            {
                type: 'pie',
                radius: [60, 100],
                avoidLabelOverlap: false,
                // height: '100%',
                left: 0,
                // width: 260,
                itemStyle: {
                    borderRadius: 4,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    formatter: '{time|{c}%}',
                    fontSize: 12,
                    rich: {
                        time: {
                            fontSize: 20,
                            color: '#fff'
                        }
                    }
                },
                labelLine: {
                    show: false,
                },
                data: props.data.seriesDataList
            }
        ]
    };

    option && myChart.setOption(option);

})
</script>

<style scope>
</style>
